<?php
session_start(); //需要在任何http输出之前使用
?>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>会员管理系统-会员注册</title>
    <style>
        .main {
            width: 80%;
            margin: 0 auto;
            text-align: center
        }

        h2 {
            text-align: center;
            font-size: 16px
        }

        h2 a {
            color: cornflowerblue;
            text-decoration: none;
            margin-right: 15px
        }

        h2 a:hover {
            color: crimson;
            text-decoration: underline
        }

        h2 a:last-child {
            margin-right: 0
        }

        .require{color: red}
        .ok{color:green}
        table{width:80%}
        #loading{display: none}
    </style>
</head>
<body>
<div class="main">
    <?php
    include_once 'nav.php';
    ?>
    <form id="form" action = 'ajaxPostRegister.php' method="post" enctype="multipart/form-data">
        <table align="center" cellpadding="10" border="1" cellspacing="0">
            <tr>
                <td align="right">用户名</td>
                <td align="left"><input type="text" name="username" id="username" onblur="ajax()"><span class="require">*</span> <img id="loading" src="img/loading.gif" width="50px"><span id="usernameMsg"></span> </td>
            </tr>
            <tr>
                <td align="right">密码</td>
                <td align="left"><label><input type='password' id="pw" name="pw"> <span class="require">*</span></label></td>
            </tr>
            <tr>
                <td align="right">确认密码</td>
                <td align="left"><input type='password' name="cpw" id="cpw"> <span class="require">*</span></td>
            </tr>
            <tr>
                <td align="right">信箱</td>
                <td align="left"><label>
                        <input name="email" id="email">
                    </label></td>
            </tr>
            <tr>
                <td align="right">头像</td>
                <td align="left"><label>
                        <input name="pic" id="pic" type="file"><span class="require">*</span>
                    </label></td>
            </tr>
            <tr>
                <td  align="right"><input type="button" onclick="check();" value="提交"></td>
                <td align="left"><input type="reset" value="重置"></td>
            </tr>
        </table>
    </form>
</div>
</body>

<script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script src="js/jquery.form.min.js"></script>
<script>
    $(function(){
       // $("#loading").hide();
    })
    function ajax(){
        let username = $("#username").val().trim();
        if(username.length > 0){
            if(checkUsername(username)){
                //说明用户名有填写，且满足构成规则
                //通过jQuery封装 ajax去后台查询当前用户名是否有效
                $.ajax({
                    url:'ajaxCheckUsername.php',
                    data:{
                        username:username
                    },
                    dataType:'json',
                    type:'post',
                    complete:function(){
                        $("#loading").hide();
                    },
                    beforeSend: function(){
                        //发起请求之前，显示loading动画
                        $("#loading").show();
                    },
                    success:function(data){
                        //当ajax执行成功的时候调用
                        console.log(data);
                        if(data.code == -1){
                            //说明用户名已经被占用，接下来，给出被占用的提示
                            //alert('当前用户名 ' + username + ' 己被注册！');
                            //jQuery支持链式操作
                            $("#usernameMsg").text('当前用户名己被占用').addClass('require').removeClass('ok');
                            $("#username").focus().select();
                        }
                        else{
                            $("#usernameMsg").text('当前用户名可以使用').addClass('ok').removeClass('require');
                        }
                    },
                    error:function(){
                        //当ajax执行失败的时候调用
                        alert('网络错误');
                    }
                })
            }
        }
    }
    function checkUsername(username){
        let usernameReg = /^[a-zA-Z\d]{3,10}$/;
        if(!usernameReg.test(username)){
            alert('用户名必填，且只能由大小写字符和（或）数字构成，且长度在3到10个字符之间');
            return false;
        }
        return true;
    }
    function check() {
        //进行数据验证，合格以后返回true，否则，返回false
        //第一步，判断用户名是否填写，且填写的内容是否是大小写字符、数字，且长度在3至10个字符之间。
        let username = document.getElementsByName('username')[0].value.trim();
        let pw = document.getElementsByName('pw')[0].value.trim();
        let cpw = document.getElementsByName('cpw')[0].value.trim();
        let pwReg = /^[a-zA-Z\d_*]{6,10}$/;
        let email = document.getElementsByName('email')[0].value.trim();
        checkUsername(username);
        if (!pwReg.test(pw)) {
            alert('密码必填，且只能由大小写字符和（或）数字，以及*、_构成，且长度在6到10个字符之间');
            return false;
        } else {
            if (pw !== cpw) {
                alert('确认密码和密码必须相同。');
                return false;
            }
        }
        //判断邮件地址是否合格
        let emailReg = /^[a-zA-Z\d_\-]+@([a-zA-Z\d]+\.)+(com|cn|net|org)$/;
        // console.log(email)
        if (email.length > 0) {
            if (!emailReg.test(email)) {
                alert('信箱格式不正确');
                return false;
            }
        }
        if ($("#pic").val().length == 0) {
            alert('头像必须上传。');
            return false;
        }
        //接下来，使用jquery提供的ajaxSubmit插件进行异步提交
        $("#form").ajaxSubmit({
            dataType:'json',
            success: function (data) { // data 保存提交后返回的数据，一般为 json 数据
                // 此处可对 data 作相关处理
                if(data.code == '-1'){
                    alert(data.errMsg);
                }
                else {
                    alert('注册成功');
                    $("#form").resetForm(); // 提交后重置表单
                    window.parent.closeLayer();
                    window.parent.showLogin();
                }
            }
        })
    }
</script>
</html>